<template>
    <div class="order-page">
        <!-- form表单包裹 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <!-- input输入框 -->
            <el-input v-model="formInline.course" placeholder="课程名称" style="margin-left: 0px; " />
            <el-input v-model="formInline.num" placeholder="订单号" />
            <el-input v-model="formInline.user" placeholder="买家姓名" />

            <!-- 下拉状态 -->
            <el-form-item>
                <el-select v-model="type" placeholder="订单状态">
                    <el-option label="全部" value="all" />
                    <el-option label="待支付" value="1" />
                    <el-option label="已支付" value="2" />
                    <el-option label="关闭" value="0" />
                </el-select>
            </el-form-item>
            <!-- 日期选择 -->
            <el-form-item>
                <el-date-picker @change="fn1" value-format="x" v-model="value1" type="daterange" range-separator="--"
                    start-placeholder="交易时间" end-placeholder="支付时间" :size="size" />
            </el-form-item>

            <!-- 搜索 -->
            <el-form-item>
                <el-button type="primary" :icon='Search' @click="toSerch">搜索</el-button>
            </el-form-item>
        </el-form>

        <!-- 表格 -->
        <el-table :data="tableDataFittler?.slice((currentPage - 1) * pageSize, currentPage * pageSize)" :border="true"
            style="width: 100%" :cell-style="cellStyle" :table-layout="tableLayout">
            <el-table-column prop="id" label="序号" />
            <el-table-column prop="order" label="订单编号">
            </el-table-column>
            <el-table-column prop="status" label="订单状态">
                <template #default="{ row }">
                    <el-tag type="warning" v-if="row.status == 1">待支付</el-tag>
                    <el-tag v-else-if="row.status == 2">已支付</el-tag>
                    <el-tag type="info" v-else="row.status == 0">关闭</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="课程名称">
            </el-table-column>
            <el-table-column prop="buyer" label="买家" />
            <el-table-column prop="type" label="课时" />
            <el-table-column prop="price" label="价格" />
            <el-table-column prop="time" label="交易时间">
                <template #default="{ row }">
                    <span>{{ dayjs.unix(row.time).format('YYYY-MM-DD') }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="paytime" label="支付时间">
                <template #default="{ row }">
                    <span>{{ dayjs.unix(row.paytime).format('YYYY-MM-DD') }}</span>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <el-pagination background layout="prev, pager, next" :total="totalSize" :page-size="pageSize"
            :current-page="currentPage" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            class="pagination" />
    </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { onMounted, reactive, ref, computed } from 'vue'
import { getOrder } from '../../api/user';
import dayjs from 'dayjs';

const tableDataFittler = ref([])
const size = ref('default')
const currentPage = ref(1)
const pageSize = ref(10)
const maxTime = ref(null)
const minTime = ref(null)
const value1 = ref('')
const tableData = ref([])
const type = ref("all")

const formInline = reactive({
    course: '',
    num: '',
    user: '',
})

const totalSize = computed(() => {
    return tableDataFittler.value?.length
})

// 表格列自适应  
const tableLayout = ref('auto')

// 蓝色字体
const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
    if (column.label === '价格') {
        return {
            color: '#1485fe'
        }
    }
}

// 获取时间选择器选择的值
const fn1 = (timer) => {
    minTime.value = timer[0] / 1000
    maxTime.value = timer[1] / 1000
}

const handleSizeChange = (val) => {
    pageSize.value = val
}

const handleCurrentChange = (val) => {
    currentPage.value = val
}

const fetchData = async () => {
    tableData.value = await getOrder()
    tableDataFittler.value = tableData.value
}

const toSerch = () => {
    // 不过滤
    if (!formInline.course && !formInline.num && !formInline.user && type.value == "all" && !minTime.value && !maxTime.value) {
        tableDataFittler.value = tableData.value
        return
    }

    // 过滤操作
    tableDataFittler.value = tableData.value.filter((item) => {
        return ((item.name ? item.name.includes(formInline.course) : "false") && (formInline.num ? item.order.includes(formInline.num) : "false") && (item.buyer ? item.buyer.includes(formInline.user) : "false") && (type.value == "all" ? "false" : item.status.toString().includes(type.value)) && (minTime.value ? (item.time >= minTime.value && item.paytime <= maxTime.value) : "false"))
    })
}

onMounted(() => {
    fetchData()
})

</script>


<style scoped>
.order-page {
    padding: 30px;
    min-height: 600px;
}

.el-form {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.el-input {
    margin: 0 10px;
    width: 160px;
}

.el-form-item {
    margin-bottom: 0;
}

:deep(.cell) {
    text-align: center;
}

.pagination {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

:deep(.el-table th) {
    background: rgb(236, 247, 255);
    color: rgb(102, 102, 102)
}
</style>